<template>
  <div class="dashboard-container">
    <!-- 用户信息模块 -->
    <el-card class="box-card user-info-card">
      <div class="user-info">
        <el-avatar :size="50" :src="circleUrl"></el-avatar>
        <div class="info">
          <div class="user-level">个人会员</div>
          <el-button size="mini" class="custom-button" @click="goToApplication">去企业认证</el-button>
        </div>
        <el-button class="account-btn" size="mini" type="warning" plain>90天无忧账期账期立即开启</el-button>
      </div>
      <el-divider/>
      <div class="service-info">
        <div>专属商务经理： 产能小助手</div>
        <div style="margin-left: 20px;">企业微信：
          <el-link style="margin-bottom: 6px;color: var(--color-base)" @click="showQrCode('https://example.com/qr-code')">扫码添加</el-link>
        </div>
      </div>
    </el-card>

    <!-- 中部模块：待办事项 + 订单统计 -->
    <div class="middle-modules">
      <!-- 待办事项 -->
      <el-card class="box-card" style="width: 35%;">
        <div class="card-title">待办事项</div>
        <div class="empty-block">
          <img src="https://img.yzcdn.cn/vant/empty-image-default.png" />
          <div>暂无待办事项</div>
        </div>
      </el-card>

      <!-- 订单统计 -->
      <el-card class="box-card" style="width: 75%;">
        <div class="card-title">订单统计</div>
        <div class="order-status-list">
          <div
            v-for="(item, index) in orderStats"
            :key="index"
            class="order-status-item"
            @click="handleOrderStatusClick(item.type)"
          >
            <div class="count">0</div>
            <div class="label">{{ item.label }}</div>
          </div>
        </div>
      </el-card>
    </div>

    <!-- 我的订单 -->
    <el-card class="box-card">
      <div class="card-title">
        我的订单
        <el-link class="view-all"  @click="goToAllOrders" style="color: var(--color-base)">全部订单 ></el-link>
      </div>
      <div class="empty-block">
        <img src="https://img.yzcdn.cn/vant/empty-image-default.png" />
        <div>暂无订单</div>
      </div>
    </el-card>

    <!-- 二维码弹窗 -->
    <QrCodeModal :visible.sync="qrCodeModalVisible" :qrCodeUrl="qrCodeUrl" />
  </div>
</template>

<script>
import QrCodeModal from './module/QrCodeModal.vue'; // 引入二维码弹窗组件

export default {
  name: "MyDashboard",
  components: {
    QrCodeModal
  },
  data() {
    return {
      orderStats: [
        { label: "待付款", type: "pending" },
        { label: "等待商家备货", type: "prepare" },
        { label: "备货中", type: "stocking" },
        { label: "等待商家发货", type: "wait_send" },
        { label: "待换货", type: "exchange" },
        { label: "待收货", type: "receiving" },
        { label: "待结算", type: "settlement" },
        { label: "交易完成", type: "completed" },
        { label: "售后", type: "after_sale" }
      ],
      qrCodeModalVisible: false,
      circleUrl: "https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png",
      qrCodeUrl: require('@/assets/qrcode.png') // 二维码图片的URL
    };
  },
  methods: {
    handleOrderStatusClick(type) {
      this.$message.info(`功能待完善，点击了 ${type}`);
    },
    goToAllOrders() {
      this.$emit('clickUser', '3-1');
    },
    goToApplication() {
      this.$router.push({ path: '/home/ApplicationForm' });
    },
    showQrCode(url) {
      this.qrCodeUrl = url;
      this.qrCodeModalVisible = true;
    }
  }
};
</script>

<style scoped>
.box-card {
  border: 1px solid #ebeef5;
  background: #fff;
  margin-bottom: 20px;
  border-radius: 6px;
}
.user-info-card {
  position: relative;
}
.user-info {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.info {
  flex: 1;
  margin-left: 20px;
}
.user-level {
  font-weight: bold;
  margin-bottom: 8px;
}
.account-btn {
  position: absolute;
  right: 20px;
  top: 20px;
  color: var(--color-base);
  border-color: var(--color-base);
}
.service-info {
  display: flex;
  justify-content: space-between;
  color: #666;
  font-size: 14px;
  margin-top: 5px;
}
.middle-modules {
  display: flex;
  gap: 20px;
  margin-bottom: 20px;
}
.card-title {
  font-weight: bold;
  margin-bottom: 16px;
}
.order-status-list {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}
.order-status-item {
  width: 100px;
  font-size: 16px;
  text-align: center;
  cursor: pointer;
}
.order-status-item:hover {
  background: #f4f8ff;
  border-radius: 8px;
  color: var(--color-base);
}
.label{
  font-size: 14px !important;
}
.count {
  font-size: 20px;
  font-weight: bold;
}
.empty-block {
  text-align: center;
  color: #999;
  padding: 20px 0;
}
.view-all {
  float: right;
  font-size: 14px;
}
img{
  width: 100px;
  height: 100px;
}
.custom-button {
  background-color: var(--color-base); 
  color: white; 
}
.custom-button:hover {
  background-color: var(--color-base); 
}
</style>
